<template>
    <div>
        <a-select :filter-option="filterOption" :value="id" placeholder="选择回收员" show-search @change="handleChange" >
            <a-select-option value="" >全部</a-select-option>
            <a-select-option v-for="(item,index) in userList" :key="index" :value="item.value">
                {{item.label}}
            </a-select-option>
        </a-select>
    </div>
</template>

<script>
    /**
     * create by Yang
     * 查找回收员下拉框
     */
    import medicalWaste from '@api/MedicalWaste'
    import { setDataForLabel } from '../../utils/util'

    export default {
        name: 'SelectCollectorList',
        props:{
            recyclePersonId : {
                type : String,
                default : ''
            }
        },
        data() {
            return {
                id : '',
                userList: [],
            }
        },
        // created() {
        //     this.initData()
        // },
        watch:{
            recyclePersonId(){
                this.id = this.recyclePersonId;
            }
        },
        methods: {
            // 初始化查询数据
            async initData(companysId) {
                let roles = [
                    'CT_recycler',
                    'CT_carrier',
                    'hc_collector',
                ]
                let params = {
                    companysId,
                    roleCode : roles.join(',')
                };
                let list = await medicalWaste.getCollectorListByCompanyId(params)
                this.userList = setDataForLabel(list, 'id', 'realname');
            },
            // 将输入的内容与显示的内容进行匹配
            filterOption: function(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                )
            },
            handleChange : function(value,option) {
                this.id = value;
                let info = this.userList.find((val) => val.value == value);
                this.$emit('change',value, info, option);
            }
        }
    }
</script>

<style scoped>

</style>

